<template>
    <div id="manageBill">
        <div class="select-date">
            <span class="prev iconfont icon-jiantou left" @click="changeDate('reduce')"></span>
            <div class="date">
                <div class="now-date">{{nowDate}}</div>
                <div class="end-time">截止23:59:59</div>
            </div>
            <span class="next iconfont icon-jiantou right" @click="changeDate('add')"></span>
        </div>
        <!-- <div class="actual-income">
            <span class="actual-income-tit">实际收入：</span>
            <span class="money">1915.00</span>
        </div> -->
        <div class="total-income">
            <div class="tit">
                <i class="default-icon"></i>
                <span class="total-tit">总收入：</span>
                <span class="money">{{totalAmount}}</span>
            </div>
            <div id="pie"></div>
            <div class="pie-help-info">
                <div class="income-item">
                    <i class="default-icon wechat"></i>
                    <span class="income-name">微信收入:</span>
                    <span class="income-count wechat">{{wechat}}元</span>
                </div>
                <div class="income-item">
                    <i class="default-icon ali"></i>
                    <span class="income-name">支付宝收入:</span>
                    <span class="income-count ali">{{ali}}元</span>
                </div>
                <div class="income-item">
                    <i class="default-icon cash"></i>
                    <span class="income-name">现金收入:</span>
                    <span class="income-count cash">{{cash}}元</span>
                </div>
            </div>
        </div>
        <!-- <div class="total-expend">
            <div class="tit">
                <i class="default-icon"></i>
                <span class="total-tit">总支出：</span>
                <span class="money">1900.00</span>
            </div>
            <div id="pie-for-expend"></div>
            <div class="pie-help-info">
                <div class="income-item">
                    <i class="default-icon"></i>
                    <span class="income-name">其他支出:</span>
                    <span class="income-count other">1000元</span>
                </div>
            </div>
        </div> -->
    </div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "manageBill",
  props: ["storeId"],
  data() {
    return {
      dataForIncome: [],//收入的相关数据
      dataForExpend: [],//支出的相关数据
      pie: null, // 收入饼状图
      pieForExpend: null, //支出饼状图
      nowDate: "",//当前日期
      timestamp: 0, //当前时间戳
      newTimestamp: 0, //变化后的时间戳
      totalAmount:0,
      wechat:0,
      ali:0,
      cash:0
    };
  },
  watch:{
    newTimestamp(val){
      let date = new Date(val);
      let month = date.getMonth() + 1;
      let year = date.getFullYear();
      let day = date.getDate();
      let dateParam = `${year}-${month>9?month:'0'+month}-${day>9?day:'0'+day}`
      this.getData(dateParam);
    }
  },
  methods: {
    //收入饼图
    drawPieForIncome(datas) {
      let seriesData = [
        { value: datas.ali, name: "支付宝" },
        { value: datas.wx, name: "微信" },
        { value: datas.cash, name: "现金" }
      ];
      if (this.pie) {
        this.pie.dispose();
      }
      this.pie = echarts.init(document.getElementById("pie"));
      setTimeout(() => {
        this.pie.setOption({
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          color: ["#ffc655", "#fb6e52", "#2cc6ea"],
          // legend: {
          //     orient: 'vertical',
          //     x: 'right',
          //     bottom:0,
          //     data:['流失','新增','活跃']
          // },
          series: [
            {
              name: sessionStorage.getItem("storeName"),
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: "center"
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: "19",
                    fontWeight: "bold"
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: seriesData
            }
          ]
        });
      }, 200);
    },
    //支出饼图
    drawPieForExpend(datas) {
      let seriesData = [{ value: datas.active_count, name: "活跃" }];
      if (this.pieForExpend) {
        this.pieForExpend.dispose();
      }
      this.pieForExpend = echarts.init(
        document.getElementById("pie-for-expend")
      );
      setTimeout(() => {
        this.pieForExpend.setOption({
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          color: ["#ccc", "#fb6e52", "#ffc655"],
          // legend: {
          //     orient: 'vertical',
          //     x: 'right',
          //     bottom:0,
          //     data:['流失','新增','活跃']
          // },
          series: [
            {
              name: sessionStorage.getItem("storeName"),
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: "center"
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: "19",
                    fontWeight: "bold"
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: seriesData
            }
          ]
        });
      }, 200);
    },
    changeDate(type) {
      if (type === "add") {
        let date = new Date();
        let year = date.getFullYear();
        //往后一天
        this.newTimestamp += 24 * 60 * 60 * 1000;
        if (this.newTimestamp > this.timestamp) {
          this.newTimestamp = this.timestamp;
          return;
        } else {
          let newDate = new Date(this.newTimestamp);
          this.nowDate = newDate.getMonth() + 1 + "月" + newDate.getDate() + "日";
        }
      } else {
        let date = new Date();
        let year = date.getFullYear();
        //往前一天
        this.newTimestamp -= 24 * 60 * 60 * 1000;
        if (this.newTimestamp < this.timestamp) {
          let newDate = new Date(this.newTimestamp);
          this.nowDate = newDate.getMonth() + 1 + "月" + newDate.getDate() + "日";
        } else {
          this.newTimestamp = this.timestamp;
          return;
        }
      }
    },
    //获取收入支出数据
    getData(date) {
      //获取数据

      this.$http({
        url:"get-bill",
        method:"GET",
        params:{
          storeId:this.storeId,
          time:date
        }
      }).then(res=>{
        let data = res.data;
        this.drawPieForIncome(data);
        this.wechat = data.wx;
        this.ali = data.ali;
        this.cash = data.cash;
        this.totalAmount = data.total;
      });
      // this.$http.get("/get-bill?storeId="+this.storeId).then(res => {
      //   this.dataForIncome = res.data;
      //   for (var i = 0, len = 7 - res.data.length; i < len; i++) {
      //     let obj = {
      //       active_count: 0,
      //       biz_date: new Date().getTime() - 24 * 3600 * 1000 * (7 - i),
      //       lost_count: 0,
      //       new_count: 0,
      //       sleep_count: 0,
      //       total: 0
      //     };
      //     this.dataForIncome.splice(i, 0, obj);
      //   }
      //   this.drawPieForIncome(
      //     this.dataForIncome[this.dataForIncome.length - 1]
      //   );
      //   this.drawPieForExpend(
      //     this.dataForIncome[this.dataForIncome.length - 1]
      //   );
      // });
    }
  },
  mounted() {
    //初始化时间
    let date = new Date();
    //获取当前时间（不包含时分秒）的时间戳
    let month = date.getMonth() + 1;
    let year = date.getFullYear();
    let day = date.getDate();
    let nowTimestamp = new Date(`${year}/${month}/${day}`).getTime();
    //计算出昨天的时间戳,之前只能查询前一天的数据，所以这里计算了一下时间，现在可以查当日的数据
    let prevDateTimestamp = nowTimestamp- 24 * 60 * 60 * 1000;
    //初始时间两个时间戳一致
    // this.timestamp = prevDateTimestamp;
    // this.newTimestamp = prevDateTimestamp;
    this.timestamp = nowTimestamp;
    this.newTimestamp = nowTimestamp;
    //根据昨天的时间戳，获取昨天的日期
    let prevDate = new Date(prevDateTimestamp);
    let prevMonth = prevDate.getMonth() + 1;
    let prevYear = prevDate.getFullYear();
    let prevDay = prevDate.getDate();
    //昨天的日期
    // this.nowDate = prevMonth + "月" + prevDay + "日";
    //今天的日期
    this.nowDate = month + "月" + day + "日";
    // 获取数据
    let dateParam = `${year}-${month>9?month:'0'+month}-${day>9?day:'0'+day}`
    this.getData(dateParam);
  }
};
</script>

<style lang="scss" scoped>
@import "manageBill";
</style>
